<template>
  <div class="code_dialog">
    <ehl-dialog-box
      custom-class="code_dialog"
      :title="codeDialog.title"
      :show="codeDialog.show"
      :show-btn="false"
      @cancel="codeDialog.show = false"
    >
      <ehl-form ref="form" :options="codeDialog.options" :data="codeDialog.data" />
    </ehl-dialog-box>
  </div>
</template>

<script>
  import superr from '@/common/components/superr.js'
  import ehlForm from '@/common'

  export class codeDialog extends superr {
    show = false
    title = ''
    options = {
      code: {
        type: 'code',
        vertical: true,
        theme: 'dark',
        mode: 'json',
        readonly: true,
        autoFormat: true,
        lineStyle: { height: '350px' },
        style: { height: '100%' },
        tool: {
          show: false, //总体是否显示
          max_min: true, //是否显示最大化
          format: true, //是否显示格式化
          clearable: true, //是否显示清空
          mode: true, //是否显示模式选择器
          lineNum: true, //是否显示行号
        },
      },
    }
    constructor(data, title, mode) {
      super(data)
      this.title = title
      this.options.code.mode = mode
    }
  }

  export default {
    props: {
      codeDialog: { type: Object, default: () => {} },
    },
    components: { ehlDialogBox: () => $import('ehlDialogBox'), ehlForm },
  }
</script>

<style lang="less" scoped>
  .code_dialog {
    width: 100%;
  }
</style>
